<template>
    <div class="photoinfo-container">
        <h3>图片详情简约大方</h3>
        <div class="subtitle">
            <span>发表时间: 2015-04-18 12:30:50</span>
            <span>点击:  0次</span>
        </div>
        <hr>

        <!-- 缩略图 -->
        <div class="thumbs">
        <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">
        </div>

        <div class="content">丰富瑞丰高隔热个人个人提供他人共同入股投入高投入</div>
        <!-- 评论列表根据指定的id获得对应的评论库 -->
        <cmt-box :id="this.id"></cmt-box>
    </div>


    <!-- <div class="photoinfo-container">
            <h3>{{ photoinfo.title }}</h3>
            <div class="subtitle">
                <span>发表时间: {{ photoinfo.add_time }}</span>
                <span>点击:  {{ photoinfo.click }}次</span>
            </div>
            <hr>

           
            <div class="thumbs">
            <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">
            </div>

            <div class="content" v-html="photoinfo.content"></div>
         
            <cmt-box :id="this.id"></cmt-box>
        </div> -->


</template>
<script>
   import comment from "../subcomponents/comment.vue"


    export default {
        data(){
            return {
                id: this.$route.params.id,  //获取路由的id
                photoinfo: {},               //图文详情               
                list: [                       //缩略图          
                    {src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=391349527,3608422125&fm=27&gp=0.jpg",w: 600,h: 400},
                    {src: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1013439612,1457932086&fm=200&gp=0.jpg",w: 600, h: 400}
                ]
            }
        },
        created(){
            //this.getPhotoInfo(),
            //this.getThumbs()
        },
        methods: {
            //获得图文资讯
            getPhotoInfo(){
                this.$http.get("api/getimageInfo/"+this.id).then(result=>{
                    if(result.body.status === 0 ){
                        this.photoinfo = result.body.message[0]
                    }

                })
            },
            //获得缩略图
            getThumbs(){
                this.$http.get("api/getthumimages/"+this.id).then(result=>{
                    if(result.body.status ===0){
                        result.body.message.forEach(item => {
                            item.w = 640;
                            item.h = 400;   
                        });
                     this.list = result.body.message;   
                    }
                })
            },
           
        },
        //注册组件
         components: {
                "cmt-box": comment
            }

    }
</script>
<style lang="scss" scoped>

    .photoinfo-container {
        padding: 0 3px;
        
        h3{
            text-align: center;
            color: #2654fd;
            margin: 15px 0;
            font-size: 14px;
        }
        .subtitle {
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            color: #999;

        }
        .content {
            font-size: 13px;
            line-height: 30px;
        }

        .thumbs{
            img{
            margin: 10px;
            box-shadow: 0 0 8px #999;
            }
        }

    }


</style>